1. About TopStyle Lite

TopStyle Lite is a freely-distributable version of TopStyle which contains a small subset of the features found in TopStyle Pro.

Help Topics:

  • Active Style Definition
  • Style Inspector
  • Style Insight
  • Preview
  • Selector List

  • Moving to TopStyle Pro
  • Download an evaluation of TopStyle Pro
  • Order TopStyle Pro


2. Active Style Definition

The Active Style Definition

Style Definition dropdown Perhaps the most important thing to know about TopStyle is how the Active Style Definition works. To change the active style definition, simply select from the definition dropdown shown above the style inspector.

The active style definition determines which properties and values are displayed in the style inspector and style insight. For example, if you choose "Internet Explorer 3" from this dropdown, only properties and values that are understood by Microsoft Internet Explorer 3.x will be displayed.

To help you quickly locate problems, any properties in the current style sheet that aren't supported by the active style definition will be color-coded red.


3. Style Inspector

Style Inspector

Style Inspector The style inspector displays all properties supported by the Active Style Definition. The value column to the right of each property includes a dropdown containing values that are appropriate for the active style definition. Properties with assigned values are sorted to the top and colored blue.

The image of the style inspector shown here displays an example of a shorthand property. Shorthand properties such as font accept multiple values and are expandable, showing you the "sub-properties" from which they're composed. For example, font is composed of font-weight, font-style, font-variant, font-size, line-height and font-family. When you choose a value for a "sub-property," the value will be added to that of the shorthand property.

Note: Most shorthand properties must follow a specific set of rules. For example, the font property requires font-size and font-family values to be considered valid. For details, please refer to the [image] W3C CSS1 Recommendation.


4. Style Insight

Style Insight

Style Insight Style Insight simplifies the entry of style properties and values as you type them into the editor. Use the arrow keys or PageUp and PageDown to navigate the list, or begin typing the name of the property or value.

Style Insight will display automatically if you hit spacebar and pause after entering a property or value. You can also force insight to display by hitting Ctrl+Space.

Important: Style Insight only displays properties and values that are supported by the Active Style Definition.


5. Style Preview

Preview

Preview TopStyle's internal preview gives you immediate feedback on your style sheet. The preview is generated from the current style sheet, showing a list of every element and class. Note that if a body element is defined for the style sheet, it will be accurately reflected in the preview.

As you enter new properties and values, the preview will automatically update to reflect any changes.

Note: The internal preview uses an embedded copy of Microsoft Internet Explorer to display your style sheet's rules. Although TopStyle can use Internet Explorer 3.x as the internal previewer, it is strongly recommended that you use version 4.0 or later. IE 3.x has very limited CSS support, which may make it unsuitable as a previewer (depending on your target audience, of course). In addition, IE 3.x has a number of bugs that may cause problems after prolonged use in TopStyle.


6. Selector List

Selector List

Selector List
The selector list shows a breakdown of all selectors within the current style sheet grouped by selector type (element, class or ID). Clicking on a selector will locate it in the editor.

If you're new to style sheets and aren't sure what selectors are all about, please refer to our CSS Basics section for a brief overview.


Third-Party Integration with TopStyle

TopStyle offers unsurpassed power as a stand-alone style sheet editor, and it also offers first-class CSS editing from within a number of popular web authoring tools, including:

  • Allaire HomeSite and ColdFusion Studio
  • NoteTab Pro
  • HTML-Kit
  • AceHTML
  • 40tude HTML
  • ASPEdit 2000

The list of tools which support TopStyle is constantly growing, so please stop by [image] our web site for the latest details about products which integrate with TopStyle.


1. HomeSite Integration

HomeSite Integration

Both TopStyle Pro and TopStyle Lite offer integration with Allaire HomeSite version 4.01 or later. HomeSite 4.5 includes TopStyle Lite, so integration is automatically enabled by HomeSite. If you're using HomeSite 4.01, you may need to manually enable integration for TopStyle to replace HomeSite's standard style editor. To do this, open TopStyle's Options and place a checkmark in the "HomeSite Integration" box on the "Third Party Integration" page.

When integration is enabled, TopStyle will be used from within HomeSite whenever a style sheet, style block or style attribute is edited.

  • Adding Styles to Tags in HomeSite
  • Editing Embedded Styles in HomeSite
  • Editing Style Sheets in HomeSite


2. Adding Styles to Tags in HomeSite

Adding Styles to Tags in HomeSite

Most HomeSite tag dialogs include a style editor toolbutton (shown at left). Clicking this button will display TopStyle Lite's inline style editor, where you can easily edit the contents of the tag's style attribute

Clicking the "Done" button in TopStyle will close the editor and insert the current style declaration into HomeSite. Clicking the "Cancel" button will close the editor without modifying the style in HomeSite.

To see this in action, open an HTML document in HomeSite, right-click on a <body> tag, then select "Edit Tag" from the context menu. On the resulting tag dialog, simply click the style editor button to display the TopStyle Editor.


3. Editing Embedded Styles in HomeSite

Editing Embedded Styles in HomeSite

If you embed styles in your HTML documents, you can use TopStyle to edit your <style>..</style> blocks. Simply right click in a style block and select "Edit Style Block" to open it in TopStyle.

When editing style blocks, TopStyle Lite will display the editor window, style inspector, selector list and preview window. When you're finished editing the style block, click the "Done" button to insert it into HomeSite's active document.


4. Editing Style Sheets in HomeSite

Editing Style Sheets in HomeSite

Once HomeSite integration is enabled, you can use TopStyle to edit style sheets from within HomeSite. Simply right-click on a CSS file in HomeSite's file list and select "Edit Style Sheet," and the style sheet will be opened for editing in TopStyle. In addition, right-clicking on a <link> tag in HomeSite and selecting "Edit Linked Style Sheet" will open the style sheet in TopStyle. If TopStyle Pro is installed, it will be used whenever editing CSS files from within HomeSite. Otherwise, TopStyle Lite will be used.

Note: Due to a bug in HomeSite 4.01, you cannot edit linked style sheets that use relative paths. Attempting to do so will cause HomeSite to display a "file not found" message. This problem does not exist in HomeSite 4.5.


1. What are style sheets?

CSS Basics

What are style sheets?

If you've ever created a web site, you've most likely used an assortment of <font> and other tags to control how your pages look. This ties the presentation of your site with its content, making it hard to modify your site's design. Suppose you later decide you want to change the color scheme or fonts used in your site - you'll have to edit every page in order to do this.

Style sheets provide a solution to this problem. Instead of defining the site's design in each and every page, you can use a style sheet to control the overall layout of your site. Then if you want to change how your site looks, you simply modify the style sheet.

For an nice example of this, visit the TopStyle home page at [image] http://www.bradsoft.com/topstyle/. At the top of each page you'll see a small [image] image. If you click this image, the site will switch to a different style sheet. This example - while simple - should give you a good idea of the flexibility provided by style sheets.

  • What does a style sheet look like?
  • How do I use styles on my site?
  • What are the drawbacks of style sheets?

Please note that only a very basic overview of style sheets is provided here - several important topics, such as positioning, are not mentioned. For a more thorough overview of style sheets, come visit our [image] online bookstore for recommendations on books about style sheets. You may also find it helpful to browse our list of external CSS resources for more information.

Next »


2. What does a style sheet look like?

CSS Basics

What does a style sheet look like?

A style sheet is made up of rules that look something like this:

H3 {
font-family: Arial;
font-style: italic;
color: green
}

Each rule begins with a selector, which is H3 in the example above. A selector is normally one or more HTML elements (tags), and the declarations inside the rule describe how those elements should appear. A declaration is simply a CSS property followed by a value. For example, the declaration "font-style: italic;" is composed of the property "font-style" followed by the value "italic". So, this example states that every <H3> HTML tag should use an Arial italic font and be colored green.

You can also use classes as selectors, which aren't tied to specific HTML elements. For example, consider this rule:

.greenitalic {
font-family: Arial;
font-style: italic;
color: green
}

The declaration block is the same as that in the previous example, but instead of using H3 as the selector, we're using the class .greenitalic. Note that .greenitalic doesn't mean anything special - you can use anything as a class name provided that it starts with a period and is composed of a single word (spaces and underscores are not allowed).

To apply a class to an HTML tag, you use the the class attribute (which was introduced in HTML 4.0). For example, to apply the above style to an <H3> tag, you'd use:

<H3 CLASS="greenitalic">this is greenitalic<H3>

(note that the period before the class name is not included).


3. How do I use styles on my site?

CSS Basics

How do I use styles on my site?

There are several ways you can use style sheets. The first is simply to create your HTML documents using the style attribute introduced in HTML 4.0. Most HTML tags now support this attribute, and it enables you to define styles on a tag-by-tag basis. For this reason, we recommend against using the style attribute. By applying styles within your tags, you're missing out on the benefits of keeping your content separate from your design.

The next method is to embed the style using a style block in the <HEAD> section of your HTML document. A style block is composed of an opening <STYLE> tag followed by a set of CSS rules followed by a closing </STYLE> tag. For example:

<STYLE>
BODY { color: navy; }
H1 { font-size: 12pt; }
</STYLE>

While this method is better than applying styles on a tag-by-tag basis, it still ties the style to a particular HTML document. We recommend using the remaining method, linking an external style sheet, to achieve the greatest flexibility. Linking a style sheet to an HTML document simply requires using a <LINK> tag in the <HEAD> section of every document you wish to apply the style sheet to. For example:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Once you've linked a style sheet to your pages, any changes to that style sheet will apply to every HTML document it's linked to. This is where the benefits of style sheets are most apparent, since you no longer have to update every single page in order to overhaul your site's design.


4. What are the drawbacks of style sheets?

CSS Basics

What are the drawbacks of style sheets?

Style sheets do have a downside. Right now the biggest problem is the imperfect CSS implementations that today's browsers offer. Even though the [image] W3C issued their [image] CSS1 recommendation way back in 1996, not every browser fully supports it. Although recent browsers from Microsoft and (most notably) Opera Software include fairly complete CSS1 support, older browsers - Internet Explorer 3 and Netscape 4 in particular - are not only incomplete in their CSS support, but what they do support is often very buggy as well.

This makes it very difficult to create style sheets that work across all browsers, since what looks good in one browser may look awful in another. Some web authors use JavaScript to serve up a different style sheet for each browser, but we don't recommend this since it negates some of the reasons you'd want to use CSS in the first place.

This is where TopStyle comes in. TopStyle helps you create style sheets that work across browsers by alerting you of problems as you work. If you're using the full version of TopStyle (as opposed to TopStyle Lite), the style checker will validate your code, warning you not only of errors in your style sheet, but also of bugs in popular browsers that may affect its rendering.

« Previous


Moving to TopStyle Pro

TopStyle Lite contains a tiny subset of the features found in TopStyle Pro. If you haven't tried TopStyle Pro, we invite you to stop by our [image] download page for a free evaluation copy, or visit the [image] TopStyle home page for more information about TopStyle Pro's features.

TopStyle Pro contains the following features not found in TopStyle Lite:

  • Powerful Style Checker to validate your style sheets against multiple style definitions. Find out whether your style sheets are valid for CSS1, CSS2, Internet Explorer 3, 4, 5 and 5.5, Netscape 4, Opera 3.5, Opera 4.0 and WebTV Plus.
  • Site-wide style management and reporting, immediately giving you information such as how many HTML documents in your site are linked to style sheets, how many contain broken style links, how many contain <style>..</style> blocks, and a lot more.
  • Orphan style finder to locate style classes and IDs that are defined in your site's style sheets but not used in any of your site's HTNL documents.
  • Undefined style finder to locate HTML documents which use style classes or IDs which aren't defined in any linked style sheets.
  • Choose any HTML document as a preview file - TopStyle will apply the current stylesheet to it for previewing.
  • Property help - select a property, and TopStyle will show which browsers support it.
  • Quickly apply styles to your entire site with the Link Wizard.
  • Export feature which exports an existing style sheet to a new style sheet containing only properties and values supported by a target style definition. For example, take a style sheet designed for Internet Explorer 5.0 and quickly create a new style sheet from it which only contains properties and values supported by Netscape 4.x.
  • Style Sweeper to format your style sheets based on multiple rules.
  • Call the W3C's online CSS validator from within TopStyle.
  • Open from Web downloads all style sheets linked to a specific HTML document on the Web.
  • Multiple-document editing.
  • Regular expression search and replace.
  • Fully customizable toolbars and menus.

...and a lot more.


TopStyle Help - Resources

Style Sheet Resources

  • W3C CSS1 Recommendation
  • W3C CSS2 Specification
  • W3C CSS Validator

  • Dave Raggett's Introduction to CSS
  • Effective Use of Style Sheets

  • Web Review - style.webreview.com
  • Web Review's CSS Master Compatibility Chart
  • WebMonkey Stylesheets Guide

  • CSS Pointers Group
  • Web Design Group
  • Index DOT CSS
  • RichInStyle.com

  • WebTV Viewer Download


13. Exporting Style Sheets

Exporting Style Sheets

Many web developers use "browser sniffing" on their sites to determine which browser a visitor is using, and then use server-side coding (ASP, CFML, PHP, JSP, etc.) to add a <link> to a style sheet specifically tailored to that browser. While this technique has the benefit of avoiding the process of creating a single style sheet that works across all browsers, it can still be very time-consuming to employ.

Luckily, TopStyle can help by exporting a style sheet to a new style sheet which contains only properties and values supported by a specific style definition.

To export a style sheet, click the toolbutton shown here or select "Export" from TopStyle's File menu. The Export dialog will then appear, displaying a list of target style definitions. Simply select one of these target definitions and click OK, and TopStyle will create a new style sheet based on the current style sheet. This new style sheet will contain only items supported by the target definition.

Note: Although TopStyle can remove properties and values that aren't supported by the target browser, it can't compensate for bugs in the target browser that only appear when styles are used in specific situations (such as in tables, which often cause problems with Netscape 4.x). For this reason, keep in mind that you will still need to test the exported style sheet in the target browser(s).

Related topics: All About Style Definitions, Style Checker


5. Property Help

Property Help

Property Help appears below the style inspector and shows the level of support each style definition has for the property selected in the style inspector. The example below is for a property fully supported by CSS1, not supported by Internet Explorer 3, and partially supported by Internet Explorer 4, Netscape 4 and Opera 3.5.

Clicking the ? at the right of the property help will display detailed help about the selected property.

Note: You can customize which style definitions are shown in property help by going to the Property Help page in TopStyle's Options (F8).

Related topics: style inspector


3. Using Style Insight

Style Insight

Style Insight Style Insight simplifies the entry of style properties and values as you type them into the editor. Use the arrow keys or PageUp and PageDown to navigate the list, or begin typing the name of the property or value.

Style Insight will display automatically if you hit spacebar and pause after entering a property or value. You can also force insight to display by hitting Ctrl+Space.

Important: Style Insight only displays properties and values that are supported by the Active Style Definition.

Related topics: Style Inspector, Setting the Active Style Definition


4. Style Inspector

Style Inspector

Style Inspector The style inspector displays all properties supported by the Active Style Definition. The value column to the right of each property includes a dropdown containing values that are appropriate for the active style definition. Properties with assigned values are sorted to the top and colored blue.

The image of the style inspector shown here displays an example of a shorthand property. Shorthand properties such as font accept multiple values and are expandable, showing you the "sub-properties" from which they're composed. For example, font is composed of font-weight, font-style, font-variant, font-size, line-height and font-family. When you choose a value for a "sub-property," the value will be added to that of the shorthand property.

Note: Most shorthand properties must follow a specific set of rules. For example, the font property requires font-size and font-family values to be considered valid. For details, please refer to the [image] W3C CSS1 Recommendation.

Beneath the style inspector you'll see property help, which shows which style definitions support the selected property.

Related topics: All About Style Definitions, Property Help, CSS Structure and Rules, CSS Properties


2. All About Style Definitions

All About Style Definitions

What is a style definition?
In TopStyle, a style definition is simply a set of properties, values and rules that apply to a specific implementation of CSS. For example, the "Internet Explorer 4" style definition contains a list of properties and values supported by Microsoft Internet Explorer 4. Likewise, the "CSS Level 1" style definition contains information about CSS1.

How are Style Definitions used in TopStyle?
Style definitions are used wherever information about a specific CSS implementation is needed. For example, the style checker uses style definitions to determine whether a specific CSS property or value is supported by a particular browser.

What does the Active Style Definition do?
The Active Style Definition tells TopStyle which style definition to consult when displaying properties and values in style insight and the style inspector. To change the Active Style Definition, simply select a new definition from the dropdown shown below. Active Style Definition Selector Only properties and values that are supported by the Active Style Definition will appear in style insight and the style inspector. Properties that are invalid (not supported) by the Active Style Definition will be color-coded red in the editor. To see this in action, select "Internet Explorer 5" from the CSS definition dropdown, and create a rule which contains the CURSOR property. Internet Explorer 5 supports this property, so it's color-coded as normal. However, if you switch to "CSS Level 1," CURSOR will now be color-coded red since the cursor property isn't supported by CSS1.

Related topics: Style Checker, Using Style Insight, Style Inspector, Exporting Style Sheets


1. Style Checker Index

Style Checker Index

TopStyle's Style Checker is a powerful tool that helps you locate problems in your style sheets. The style checker will validate your style sheet against multiple style definitions, flagging any invalid properties or values it finds. It will also warn you if bugs in popular browsers may cause problems even when your style sheet is perfectly valid.

  • Configuring the Style Checker
  • Reading the Style Checker Results
  • Style Checker Error Levels
  • Style Checker Error Messages
  • Using the W3C CSS Validator


2. Configuring the Style Checker

Configuring the Style Checker

To configure the style checker, click the toolbutton shown to the left or press [Shift+F6]. This will activate the style checker page in TopStyle's Options. The first thing you'll see is a list of style definitions. Any style definition with a checkmark next to it will be validated against by the style checker.

After choosing which style definitions you want to include, click the error levels item underneath the style checker item in the Options dialog. This is where you choose which types of errors you want to see reported.

You can also choose how the style checker should handle URL values, such as those used in the background-image property. By default, only local URLs are verified, by you can choose to verify remote URLs if desired.

When you're done configuring, click the toolbutton shown to the left to run the style checker.

Related topics: Reading the Style Checker Results, Error Levels, Error Messages


Style Checker Error Levels

The Style Checker reports four levels of error messages:

  • Errors: The style sheet contains unknown properties, unbalanced comments, broken URLs and other problems that will significantly impact the style sheet

  • Warnings: The style sheet contains empty rules, duplicate properties (ie: "Color" defined twice in the same rule), duplicate selectors and other problems that may impact the rendering

  • Hints: The style violates recommended practices (example: a color is specified for a rule without a background color)

  • Browser Tips: These are warnings about particular browsers, usually bugs in their CSS implementation (ie: Netscape incorrectly treats URLs as relative to the HTML document instead of the style sheet)

In addition, TopStyle can also report errors concerning unsupported selectors and pseudo-classes. It's recommended that you always leave these two items checked, since unsupported selectors and pseudo-classes are a common source of problems when creating style sheets.

Related topics: Style Checker Error Messages


Style Checker Error Messages

  • Property redefined. The shorthand property "x" already defines "x".
  • Property "x" does not exist in this definition
  • "x" is not a valid value for "x"
  • When using the color property, a background or background-color property should also be defined
  • A generic family name should be included in your font list
  • The font property should include a size value.
  • "x" is defined multiple times in the same rule
  • Value for "x" is empty
  • "x" is not a valid length unit
  • System colors are not supported by this definition
  • Only the standard 16 named colors are supported by this definition
  • RGB colors are not supported by this definition
  • Multiple values are defined for "x", but this property does not allow sub-values
  • Too many values are defined for "x"
  • The number of comments opened (/*) does not match the number closed (*/).
  • The number of open braces does not match the number of close braces
  • Selector "x" redeclared - rule will not be checked
  • Local URL not found: "x"
  • The invalid character "x" is used in selector "x"
  • This selector contains an underscore, which will cause most browsers to ignore it.
  • Empty declaration block for "x"
  • Font names that contain spaces should be enclosed in quotes.
  • The font property requires a font-size
  • There should not be a space between the number and the length unit in this value.
  • Pseudo-class "x" isn't supported by this style definition.
  • "x" selectors aren't supported by this style definition

Property redefined. The shorthand property "x" already defines "x".
Shorthand properties are used to group related values under a single property. For example, the font property is composed of font-style, font-variant, font-weight, font-size, line-height and font-family. So, a rule that includes the font shorthand property shouldn't also include font-family, since in effect this is defining font-family twice. Another common mistake is to redefine background-color by using the shorthand property background.

Top Property "x" does not exist in this definition
The identified property is not valid for the style definition. For example, the CSS1 definition will raise this error if you use the cursor property, since cursor wasn't introduced until CSS2.

"x" is not a valid value for "x"
The value given for the specified property is not valid. Common mistakes that lead to this error are:

  • Failing to add a unit to a length value (ex: 12 instead of 12pt)
  • Using a value that's valid in one style definition but not in another (ex: none is a valid text-decoration value in Internet Explorer 4, but it's not supported by Internet Explorer 3)
  • Using a percentage value for a property that doesn't support percentages.
  • Neglecting to use a hash in front of a hex color value (ex: 99cccc instead of #99cccc)

Top When using the color property, a background or background-color property should also be defined
The background and color properties should be specified together to avoid conflicts with user style sheets.

A generic family name should be included in your font list
Your document may be viewed by many different systems, so there's no guarantee that every visitor will have a particular font. Generic fonts, on the other hand, are fonts that should be understood by every CSS-capable browser. Always add a generic font (such as sans-serif, serif or monospace) to the end of any font-family value. Note that some style definitions (such as WebTV Plus) don't support the full set of generic font names, so you may get this error even when a generic name is used.

The font property should include a size value.
The shorthand font property requires a font size value, but none is given.

Top "x" is defined multiple times in the same rule
The same property is used more than once within a single rule.

Value for "x" is empty
A property is defined with no value. Example: { font-size: ; }.

"x" is not a valid length unit
A length value is using an invalid unit. This may occur if you misspelled the unit name (example: "pz" instead of "px") or if a particular style definition doesn't support the specified unit (example: Internet Explorer 3 doesn't support the "em" unit).

Top System colors are not supported by this definition
System colors aren't real colors, but are instead colors on the user's system. For example, the system color ButtonText refers to the color used for push buttons. System colors were introduced in CSS2 and aren't supported by all browsers, so this error will be generated by any style definition that doesn't understand them.

Only the standard 16 named colors are supported by this definition
Style definitions such as CSS1 only understand the standard 16 named colors (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow), so color values such as AntiqueWhite or Coral aren't supported.

RGB colors are not supported by this definition
You may get this error when the validating against the Internet Explorer 3 style definition, since IE3 doesn't support RGB color values.

Top Multiple values are defined for "x", but this property does not allow sub-values
A property which only accepts a single value has more than one value given.

Too many values are defined for "x"
The specified property only accepts a certain number of values, and you have more than that number of values defined. For example, margin accepts four values, so you'll get this error if you supply five values.

The number of comments opened (/*) does not match the number closed (*/).
You'll see this error if you neglect to close a comment. The style checker will quit if it runs into this problem, since it normally skips comments.

Top The number of open braces does not match the number of close braces
This error will occur if you neglect to close a rule, or if you accidentally type an extra { or } somewhere in your style sheet.

Selector "x" redeclared - rule will not be checked
A selector is used more than once within the same style sheet. You can turn this warning off on the Style Checker page in TopStyle's options.

Local URL not found: "x"
A local URL could not be resolved. Make sure that the URL value points to a valid file.

Top The invalid character "x" is used in selector "x"
Selectors must begin with an alphabetic character, and can't contain spaces or other special characters.

This selector contains an underscore, which will cause most browsers to ignore it.
Some browsers, such as Internet Explorer 5, support the use of underscores in selector names. However, most do not, and will ignore the entire rule.

Empty declaration block for "x"
You have an empty declaration block (ex: BODY { } ).

Top Font names that contain spaces should be enclosed in quotes.
Although most browsers don't enforce this rule, it's a good idea to place quotes around font names that contain spaces.

The font property requires a font-size or font-family value.
A common mistake when using the font property is to neglect to include a font-size or font-family value. These values are required in order for the font property to be considered valid.

There should not be a space between the number and the length unit in this value.
A common mistake is to use a space between a number and its unit (ex: 12 pt instead of 12pt.)

Top Pseudo-class "x" isn't supported by this style definition.
Many pseudo-classes aren't supported by every browser. Most notably, the commonly-used A:HOVER pseudo-class isn't supported by Netscape 4.x.

"x" selectors aren't supported by this style definition
Many selector types aren't supported by every browser, resulting in this error. In particular, CSS2 selectors (such as attribute selectors) are poorly supported by current browsers.

Related topics: Style Checker Error Levels


3. Reading the Style Checker Results

Reading the Style Checker Results

Style Checker Results

As the style checker runs, it reports a list of error messages related to each style definition you selected during configuration. Clicking on an error message will select the associated property or value in the current style sheet.

Note: If no errors are found for a specific style definition, that definition will not appear in the style checker results.

In addition to errors related to each style definition, you may also see a General warning area. This area includes warnings that apply regardless of the style definition. For example, you may have a property defined twice within the same rule, or you may have used the same selector more than once within a style sheet.

Many of the errors displayed by the style checker have popup help associated with them. When one of these errors is selected, TopStyle will flash a yellow message in the status bar stating "Hit F1 for more information about this error." Hitting F1 will display a popup hint window with helpful details about the warning. If you're new to style sheets, this information will get you up-to-speed on some of the more common style sheet problems and mistakes.

Please refer to the Error Message Reference for further details on some of the problems listed in the style checker results.

Related topics: Configuring the Style Checker, Error Levels, Error Messages


W3C CSS Validator

In addition to using the style checker, we also recommend using the W3C's online CSS validator to validate your style sheets. Clicking the toolbutton shown to the left will cause TopStyle to pass the current style sheet to the W3C validator. The results will be shown in an external browser window, using your default browser.

Note: The W3C Validator is an online tool, so you will need to have an active Internet connection in order to use it. If your connection uses a proxy server, make sure to configure TopStyle's proxy settings on the "Proxy" page in Options (F8). In addition, please keep in mind that this service is provided by the W3C and is not under our control.


Advanced Tip: Using JavaScript to serve platform-specific style sheets

One way to get around all the browser compatibility issues is to use a different style sheet for each browser. You can do this by adding a JavaScript block such as the one below to the <head> section of your HTML document(s):

   <script language="JavaScript">
   <!--
    if(-1 != navigator.userAgent.indexOf("MSIE"))
    {
    // Internet Explorer
    document.write('<link rel="stylesheet" type="text/css" href="ie.css">');
    }
    else if (-1 != navigator.userAgent.indexOf("Mozilla"))
    {
    // Netscape
    document.write('<link rel="stylesheet" type="text/css" href="netscape.css">');
    }
    else
    {
    // other
    document.write('<link rel="stylesheet" type="text/css" href="other.css">');
    }
   //-->
   </script>

Note: The above example, while perfectly usable, is of course a minimalist approach to browser detection. A more thorough example of using JavaScript to detect both the browser and the platform may be found [image] here.


Advanced Tip: Using JavaScript to serve platform-specific style sheets

There may be situations in which you want to use a different style sheet depending on whether the visitor is using a Macintosh or a Windows system. A simple way to accomplish this is to add a JavaScript block similar to the one shown below to the <head> section of your HTML document(s):

   <script language="JavaScript">
   <!--
   // style sheet for Macintosh
   if (navigator.platform.indexOf('Mac') != -1) {
      document.write('<link rel="stylesheet" type="text/css" href="mac.css">');
   // style sheet for Windows
   } else{
     document.write('<link rel="stylesheet" type="text/css" href="windows.css">');
   }
   //-->
   </script>

Note: The above example, while perfectly usable, is of course a minimalist approach to platform detection. A more thorough example of using JavaScript to detect both the browser and the platform may be found [image] here.


CSS Tip: Use linked style sheets instead of inline styles

Although it's simple enough to apply styles using a <style>..</style> block in the head of each HTML document, doing so negates the maintenance benefits of using style sheets. Instead, create a style sheet that can be applied to several documents in your site (or, better yet, your entire site), and use the <link> tag to link it to each HTML document.

Once you do this, you can simply modify a single style sheet to change the appearance of your entire site.


CSS Tip: Let the browser choose the font size

Style sheets make it tempting to specify font sizes, but before you set a font size you should be aware that doing so has its drawbacks. Most notably, different browsers interpret font sizes differently, so a font that appears readable in Internet Explorer may be smaller when viewed in Netscape Navigator. In addition, font sizes on Windows aren't always the same as they are on other platforms, so while your site may look good to Windows users, it may be illegible to those with a Mac.

Of course, this is a tough tip to follow, and we have to admit that we don't always adhere to it ourselves. However, if you must specify a font size, make sure it's a relative font size instead of an absolute one. Using an absolute length unit such as pt instead of a relative one such as px makes it impossible for many users to resize the text on your site, which may make your site inaccessible to them.

Note: Some CSS references recommend using em units, but we advise against this. Internet Explorer 3 doesn't support em, and any em units it finds will be treated as px. So, while font-size: 1.2em may look fine on Internet Explorer 4, it will rendered as 1.2 pixels on Internet Explorer 3 - in other words, it will be illegible!


CSS Tips & Tricks

General

  • Let the browser choose the font size
  • Test on different browsers
  • Use linked style sheets instead of inline styles
  • Make sure your pages display on browsers that don't support CSS
  • Validate both your CSS and your HTML

Working Around Netscape Bugs

Netscape 4 has a number of CSS-related bugs that can make using style sheets a frustrating experience. These tips will help you work around some of the most common problems. In addition to the tips listed here, be sure to visit the CSS Pointers Group's CSS Bugs and Workarounds page for a much more thorough listing of CSS-related browser bugs.

  • Add TD to the BODY selector
  • Never use relative paths
  • Avoid using line-height with blocks containing images
  • Make sure all linked style sheets exist!

Advanced Techniques

  • Using JavaScript to serve browser-specific style sheets
  • Using JavaScript to serve platform-specific style sheets


CSS Tip: Make sure your pages work in browsers that don't support CSS

An important step in testing a CSS-enabled site that many authors skip is making sure that it displays well in browsers that don't support CSS. It doesn't have to look as good, but it does have to be legible.

Although it's tempting to convince yourself that everyone who visits your site has a modern browser that supports CSS, keep in mind that Netscape 4 won't display style sheets if JavaScript is turned off. Since some users turn JavaScript off, even visitors with a modern browser may not be able to view your styles. A nice benefit of this, of course, is that you can turn off JavaScript in Netscape 4 to get a quick look at how your site appears without style sheets.


Netscape Tip: Add TD to the BODY selector

Through inheritance, styles set on an HTML element will also be applied to any children of that HTML element. For example, if you define a style for the BODY element like this:

BODY {
color: red;
}

Then every HTML element within the BODY should be displayed with a red foreground color. Unfortunately, Netscape 4 doesn't honor inheritance in tables, so tables in any HTML documents which use the above style won't use red text. A workaround for this is to add TD to the BODY selector so that table cells use the BODY style, like this:

BODY, TD {
color: red;
}

You may also want to add TH to the BODY selector if you want table headings to use the BODY style.

Note: Netscape 4 has a number of other inheritance problems which result in the BODY style not being applied to child elements. If you run into a situation with Netscape 4 in which the BODY style isn't being inherited, try adding child elements to the BODY selector. We've run into cases where the only way to solve Netscape inheritance problems was to create a selector like this one:

BODY,TD,TH,P,DIV,FORM,H1,H2,H3,H4,BLOCKQUOTE,UL,OL


Netscape Tip: Make sure all linked style sheets exist!

If an HTML document includes a <link> to an external style sheet which doesn't exist, the browser should ignore the missing style sheet. Unfortunately, Netscape 4 will fail to render the HTML document, instead displaying an error stating that "The page cannot be found."

So, make sure that all of your external style sheet links are valid, or else visitors who use Netscape 4 may not be able to see your site!


Netscape Tip: Avoid using line-height with blocks containing images

The line-height property is great for controlling the spacing between lines, but a nasty bug in Netscape 4 makes it a very poor choice within blocks containing images. For example, if you have a P or DIV block that contains an image, using a line-height may either cause the image to get chopped off or make it float over text.


Netscape Tip: Never Use Relative Paths

If you use relative paths in your style sheet, Netscape 4 will incorrectly interpret the paths as being relative to the HTML document to which the style sheet is linked instead of being relative to the style sheet itself. This is fine if your style sheet is in the same directory as the HTML document, but if you link your style sheet to any HTML documents in a different directory, then none of the relative paths will be correct.

One way to work around this problem is to use absolute paths or root paths. For example, suppose you have a style sheet located at http://localhost/rootfolder/styles/main.css and you wish to add a background-image property that displays the image located at http://localhost/rootfolder/img/button.gif. You might think you should code this as:

.button {
background-image: url("../img/button.gif");
}

While technically correct, the Netscape bug will prevent the image from being located in the above example. Instead, use a root path like this:

.button {
background-image: url("/rootfolder/img/button.gif");
}


CSS Tip: Test on different browsers

TopStyle's Style Checker can be enormously helpful in tracking down obscure browser-specific CSS problems, but it can't substitute for testing on different browsers. After you fix any problems the style checker reports, you should make sure to test your pages on Internet Explorer, Netscape Navigator, Opera, and whatever other browser(s) you expect your visitors to use.


CSS Tip: Validate both your CSS and your HTML

TopStyle's style checker and the W3C's CSS Validator go a long way to help you find problems in your style sheets, but this won't do much good if you have invalid HTML. It's possible to have perfectly valid style sheets that don't work as intended due to errors in your HTML.

Make sure to validate your HTML by using the W3C's [image] HTML validation service as well as a tool such as the [image] CSE HTML Validator.


The Web Design Group Copyright Page

The Web Design Group presents:

WDG's Copyright and Trademark Page

Give me the Non-Technical Version

Except as otherwise indicated any person is hereby authorized to view, copy, print, and distribute this document subject to the following conditions:

  1. The document may be used for informational, non-commercial purposes ONLY.
  2. Any copy of the document or portion thereof must include this copyright notice.
  3. The Web Design Group (hereafter also known as WDG) reserves the right to revoke such authorization at any time, and any such use shall be discontinued immediately upon written notice from the Web Design Group or any of its members.

TRADEMARKS

WDG and all WDG logos and graphics contained within this site are trademarks of the Web Design Group or its members. All other brand and product names are trademarks, registered trademarks or service marks of their respective holders.

Guide for Third Parties Who Use WDG Trademarks

WDG authorizes you or any other reader of this document to include the Web Design Group's logo on any World Wide Web site, so long as the image is also a link to the WDG's main page located at [image] http://www.htmlhelp.com/.

No non-members of the WDG are authorized to display the WDG Member logo. The current list of members can be found at [image] http://www.htmlhelp.com/about/

Warranties and Disclaimers

THIS PUBLICATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR NON-INFRINGEMENT. WDG ASSUMES NO RESPONSIBILITY FOR ERRORS OR OMISSIONS IN THIS PUBLICATION OR OTHER DOCUMENTS WHICH ARE REFERENCED BY OR LINKED TO THIS PUBLICATION.

REFERENCES TO CORPORATIONS OR INDIVIDUALS, THEIR SERVICES AND PRODUCTS, ARE PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED. IN NO EVENT SHALL WDG BE LIABLE FOR ANY SPECIAL, INCIDENTAL, INDIRECT OR CONSEQUENTIAL DAMAGES OF ANY KIND, OR ANY DAMAGES WHATSOEVER, INCLUDING, WITHOUT LIMITATION, THOSE RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER OR NOT ADVISED OF THE POSSIBILITY OF DAMAGE, AND ON ANY THEORY OF LIABILITY, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS INFORMATION.

THIS PUBLICATION COULD INCLUDE TECHNICAL OR OTHER INACCURACIES OR TYPOGRAPHICAL ERRORS. CHANGES ARE PERIODICALLY ADDED TO THE INFORMATION HEREIN; THESE CHANGES WILL BE INCORPORATED IN NEW EDITIONS OF THE PUBLICATION. WEB DESIGN GROUP MAY MAKE IMPROVEMENTS AND/OR CHANGES AT ANY TIME.

Should you or any viewer of this publication respond with information, feedback, data, questions, comments, suggestions or the like regarding the content of any WDG publication, any such response shall be deemed not to be confidential and WDG shall be free to reproduce, use, disclose and distribute the response to others without limitation. You agree that WDG shall be free to use any ideas, concepts or techniques contained in your response for any purpose whatsoever.

Restricted Rights Legend

Use, duplication, or disclosure by the United States Government is subject to the restrictions set forth in DFARS 252.227-7013 (c)(1)(ii) and FAR 52.227-19.

Home, [image] Questions, [image] Members, [image] WDG Award, [image] Reference, [image] Links, [image] Design

Copyright © 1996. Web Design Group All rights reserved.


CSS Properties

Syntax Used in Property Definitions

Font Properties

  • Font Family
  • Font Style
  • Font Variant
  • Font Weight
  • Font Size
  • Font

Color and Background Properties

  • Color
  • Background Color
  • Background Image
  • Background Repeat
  • Background Attachment
  • Background Position
  • Background

Text Properties

  • Word Spacing
  • Letter Spacing
  • Text Decoration
  • Vertical Alignment
  • Text Transformation
  • Text Alignment
  • Text Indentation
  • Line Height

Box Properties

  • Top Margin
  • Right Margin
  • Bottom Margin
  • Left Margin
  • Margin
  • Top Padding
  • Right Padding
  • Bottom Padding
  • Left Padding
  • Padding
  • Top Border Width
  • Right Border Width
  • Bottom Border Width
  • Left Border Width
  • Border Width
  • Border Color
  • Border Style
  • Top Border
  • Right Border
  • Bottom Border
  • Left Border
  • Border
  • Width
  • Height
  • Float
  • Clear

Classification Properties

  • Display
  • Whitespace
  • List Style Type
  • List Style Image
  • List Style Position
  • List Style

Units

  • Length Units
  • Percentage Units
  • Color Units
  • URLs

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


CSS Structure and Rules

[ Basic Syntax | Pseudo-classes and Pseudo-elements | Cascading Order ]

Basic Syntax

Rules

Selectors

Any HTML element is a possible CSS1 selector. The selector is simply the element that is linked to a particular style. For example, the selector in

P { text-indent: 3em }

is P.

Class Selectors

A simple selector can have different classes, thus allowing the same element to have different styles. For example, an author may wish to display code in a different color depending on its language:

code.html { color: #191970 }
code.css  { color: #4b0082 }

The above example has created two classes, css and html for use with HTML's CODE element. The CLASS attribute is used in HTML to indicate the class of an element, e.g.,

<P CLASS=warning>Only one class is allowed per selector.
For example, code.html.proprietary is invalid.</p>

Classes may also be declared without an associated element:

.note { font-size: small }

In this case, the note class may be used with any element.

A good practice is to name classes according to their function rather than their appearance. The note class in the above example could have been named small, but this name would become meaningless if the author decided to change the style of the class so that it no longer had a small font size.

ID Selectors

ID selectors are individually assigned for the purpose of defining on a per-element basis. This selector type should only be used sparingly due to its inherent limitations. An ID selector is assigned by using the indicator "#" to precede a name. For example, an ID selector could be assigned as such:

#svp94O { text-indent: 3em }

This would be referenced in HTML by the ID attribute:

<P ID=svp94O>Text indented 3em</P>
Contextual Selectors

Contextual selectors are merely strings of two or more simple selectors separated by white space. These selectors can be assigned normal properties and, due to the rules of cascading order, they will take precedence over simple selectors. For example, the contextual selector in

P EM { background: yellow }

is P EM. This rule says that emphasized text within a paragraph should have a yellow background; emphasized text in a heading would be unaffected.

Declarations

Properties

A property is assigned to a selector in order to manipulate its style. Examples of properties include color, margin, and font.

Values

The declaration value is an assignment that a property receives. For example, the property color could receive the value red.

Grouping

In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping:

H1, H2, H3, H4, H5, H6 {
  color: red;
  font-family: sans-serif }

Inheritance

Virtually all selectors which are nested within selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the BODY will also be applied to text in a paragraph.

There are some cases where the inner selector does not inherit the surrounding selector's values, but these should stand out logically. For example, the margin-top property is not inherited; intuitively, a paragraph would not have the same top margin as the document body.

Comments

Comments are denoted within style sheets with the same conventions that are used in C programming. A sample CSS1 comment would be in the format:

/* COMMENTS CANNOT BE NESTED */

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are special "classes" and "elements" that are automatically recognized by CSS-supporting browsers. Pseudo-classes distinguish among different element types (e.g., visited links and active links represent two types of anchors). Pseudo-elements refer to sub-parts of elements, such as the first letter of a paragraph.

Rules with pseudo-classes or pseudo-elements take the form

selector:pseudo-class { property: value }

or

selector:pseudo-element { property: value }

Pseudo-classes and pseudo-elements should not be specified with HTML's CLASS attribute. Normal classes may be used with pseudo-classes and pseudo-elements as follows:

selector.class:pseudo-class { property: value }

or

selector.class:pseudo-element { property: value }

Anchor Pseudo-classes

Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to render in a different color and even a different font size and style.

An interesting effect could be to have a currently selected (or "active") link display in a slightly larger font size with a different color. Then, when the page is re-selected the visited link could display in a smaller font size with a different color. The sample style sheet might look like this:

A:link    { color: red }
A:visited { color: green; font-size: 85% }
A:active  { color: blue; font-size: 125% }

First Line Pseudo-element

Often in newspaper articles, such as those in the Wall Street Journal, the first line of text in an article is displayed in bold lettering and all capitals. CSS1 has included this capability as a pseudo-element. A first-line pseudo-element may be used in any [image] block-level element (such as P, H1, etc.). An example of a first-line pseudo-element would be:

P:first-line {
  font-variant: small-caps;
  font-weight: bold }

First Letter Pseudo-element

The first-letter pseudo-element is used to create drop caps and other effects. The first letter of text within an assigned selector will be rendered according to the value assigned. A first-letter pseudo-element may be used in any [image] block-level element. For example:

P:first-letter { font-size: 300%; float: left }

would create a drop cap three times the normal font size.

Cascading Order

When multiple style sheets are used, the style sheets may fight over control of a particular selector. In these situations, there must be rules as to which style sheet's rule will win out. The following characteristics will determine the outcome of contradictory style sheets.

  1. ! important

    Rules can be designated as important by specifying ! important. A style that is designated as important will win out over contradictory styles of otherwise equal weight. Likewise, since both author and reader may specify important rules, the author's rule will override the reader's in cases of importance. A sample use of the ! important statement:

    BODY { background: url(bar.gif) white;
       background-repeat: repeat-x ! important }
  2. Origin of Rules (Author's vs. Reader's)

    As was previously mentioned, both authors and readers have the ability to specify style sheets. When rules between the two conflict, the author's rules will win out over reader's rules of otherwise equal weight. Both author's and reader's style sheets override the browser's built-in style sheets.

    Authors should be wary of using ! important rules since they will override any of the user's ! important rules. A user may, for example, require large font sizes or special colors due to vision problems, and such a user would likely declare certain style rules to be ! important, since some styles are vital for the user to be able to read a page. Any ! important rules will override normal rules, so authors are advised to use normal rules almost exclusively to ensure that users with special style needs are able to read the page.

  3. Selector Rules: Calculating Specificity

    Style sheets can also override conflicting style sheets based on their level of specificity, where a more specific style will always win out over a less specific one. It is simply a counting game to calculate the specificity of a selector.

    1. Count the number of ID attributes in the selector.
    2. Count the number of CLASS attributes in the selector.
    3. Count the number of HTML tag names in the selector.

    Finally, write the three numbers in exact order with no spaces or commas to obtain a three digit number. (Note, you may need to convert the numbers to a larger base to end up with three digits.) The final list of numbers corresponding to selectors will easily determine specificity with the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity:

    #id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001 */
  4. Order of Specification

    To make it easy, when two rules have the same weight, the last rule specified wins.

[ Basic Syntax | Pseudo-classes and Pseudo-elements | Cascading Order ]

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties


Syntax Used in CSS Property Definitions

<Foo>
Value of type Foo. Common types are discussed on the Units page.
Foo
A keyword that must appear literally (though without case sensitivity). Commas and slashes must also appear literally.
A B C
A must occur, then B, then C, in that order.
A | B
A or B must occur.
A || B
A or B or both must occur, in any order.
[ Foo ]
Brackets are used to group items together.
Foo*
Foo is repeated zero or more times.
Foo+
Foo is repeated one or more times.
Foo?
Foo is optional.
Foo{A,B}
Foo must occur at least A times and at most B times.

Web Design Group ~ CSS Index ~ CSS Structure ~ CSS Properties


CSS Units

[ Length Units | Percentage Units | Color Units | URLs ]

Length Units

A length value is formed by an optional + or -, followed by a number, followed by a two-letter abbreviation that indicates the unit. There are no spaces in a length value; e.g., 1.3 em is not a valid length value, but 1.3em is valid. A length of 0 does not require the two-letter unit identifier.

Both relative and absolute length units are supported in CSS1. Relative units give a length relative to another length property, and are preferred since they will better adjust to different media. The following relative units are available:

  • em (ems, the height of the element's font)
  • ex (x-height, the height of the letter "x")
  • px (pixels, relative to the canvas resolution)

Absolute length units are highly dependent on the output medium, and so are less useful than relative units. The following absolute units are available:

  • in (inches; 1in=2.54cm)
  • cm (centimeters; 1cm=10mm)
  • mm (millimeters)
  • pt (points; 1pt=1/72in)
  • pc (picas; 1pc=12pt)

Percentage Units

A percentage value is formed by an optional + or -, followed by a number, followed by %. There are no spaces in a percentage value.

Percentage values are relative to other values, as defined for each property. Most often the percentage value is relative to the element's font size.

Color Units

A color value is a keyword or a numerical RGB specification.

The 16 keywords are taken from the Windows VGA palette: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

RGB colors are given in one of four ways:

  • #rrggbb (e.g., #00cc00)
  • #rgb (e.g., #0c0)
  • rgb(x,x,x) where x is an integer between 0 and 255 inclusive (e.g., rgb(0,204,0))
  • rgb(y%,y%,y%) where y is a number between 0.0 and 100.0 inclusive (e.g., rgb(0%,80%,0%))

The examples above all specify the same color.

URLs

A URL value is given by url(foo), where foo is the URL. The URL may be optionally quoted with either single (') or double (") quotes and may contain whitespace before or after the (optionally quoted) URL.

Parentheses, commas, spaces, single quotes, or double quotes in the URL must be escaped with a backslash. Partial URLs are interpreted relative to the style sheet source, not to the HTML source.

Note that Netscape Navigator 4.x incorrectly interprets partial URLs relative to the HTML source. Given this bug, authors may wish to use full URLs where possible.

Examples:

BODY { background: url(stripe.gif) }
BODY { background: url(http://www.htmlhelp.com/stripe.gif) }
BODY { background: url( stripe.gif ) }
BODY { background: url("stripe.gif") }
BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */

[ Length Units | Percentage Units | Color Units | URLs ]

Web Design Group ~ CSS Structure ~ CSS Properties


Border

Syntax: | border: <value>
Possible Values: | <border-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border property is a shorthand for setting the width, style, and color of an element's border.

Examples of border declarations include:

H2        { border: groove 3em }
A:link    { border: solid blue }
A:visited { border: thin dotted #800080 }
A:active  { border: thick double red }

The border property can only set all four borders; only one border width and border style may be given. To give different values to an element's four borders, an author must use one or more of the border-top, border-right, border-bottom, border-left, border-color, border-width, border-style, border-top-width, border-right-width, border-bottom-width, or border-left-width properties.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Bottom Border

Syntax: | border-bottom: <value>
Possible Values: | <border-bottom-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-bottom property is a shorthand for setting the width, style, and color of an element's bottom border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Bottom Border Width

Syntax: | border-bottom-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-bottom-width property is used to specify the width of an element's bottom border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-bottom, border-width, or border shorthand properties.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Border Color

Syntax: | border-color: <value>
Possible Values: | <color>{1,4}
Initial Value: | The value of the color property
Applies to: | All elements
Inherited: | No

The border-color property sets the color of an element's border. Between one and four color values are specified. If four values are given, they apply to top, right, bottom, and left border color, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

One may also use the border shorthand property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Left Border

Syntax: | border-left: <value>
Possible Values: | <border-left-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-left property is a shorthand for setting the width, style, and color of an element's left border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Left Border Width

Syntax: | border-left-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-left-width property is used to specify the width of an element's left border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-left, border-width, or border shorthand properties.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Right Border

Syntax: | border-right: <value>
Possible Values: | <border-right-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-right property is a shorthand for setting the width, style, and color of an element's right border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Right Border Width

Syntax: | border-right-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-right-width property is used to specify the width of an element's right border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-right, border-width, or border shorthand properties.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Border Style

Syntax: | border-style: <value>
Possible Values: | [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}
Initial Value: | none
Applies to: | All elements
Inherited: | No

The border-style property sets the style of an element's border. This property must be specified for the border to be visible.

Between one and four keywords are specified. If four values are given, they apply to top, right, bottom, and left border style, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

One may also use the border shorthand property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Top Border

Syntax: | border-top: <value>
Possible Values: | <border-top-width> || <border-style> || <color>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-top property is a shorthand for setting the width, style, and color of an element's top border.

Note that only one border-style value may be given.

One may also use the border shorthand property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Top Border Width

Syntax: | border-top-width: <value>
Possible Values: | thin | medium | thick | <length>
Initial Value: | medium
Applies to: | All elements
Inherited: | No

The border-top-width property is used to specify the width of an element's top border. The value may be one of three keywords, which are not affected by font size, or a length, which can be used to achieve relative widths. Negative values are not allowed.

One may also use the border-top, border-width, or border shorthand properties.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Border Width

Syntax: | border-width: <value>
Possible Values: | [ thin | medium | thick | <length> ]{1,4}
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The border-width property is used to set the border width of an element by specifying between one and four values, where each value is a keyword or a length. Negative lengths are not permitted.

If four values are given, they apply to top, right, bottom, and left border width, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

This property is a shorthand for the border-top-width, border-right-width, border-bottom-width, and border-left-width properties.

One may also use the border shorthand property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Clear

Syntax: | clear: <value>
Possible Values: | none | left | right | both
Initial Value: | none
Applies to: | All elements
Inherited: | No

The clear property specifies if an element allows floating elements to its sides. A value of left moves the element below any floating element on its left; right acts similarly for floating elements on the right. Other values are none, which is the initial value, and both, which moves the element below floating elements on both of its sides. This property is similar in function to [image] HTML 3.2's <BR CLEAR=left|right|all|none>, but it can be applied to all elements.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Float

Syntax: | float: <value>
Possible Values: | left | right | none
Initial Value: | none
Applies to: | All elements
Inherited: | No

The float property allows authors to wrap text around an element. This is identical in purpose to [image] HTML 3.2's ALIGN=left and ALIGN=right for the IMG element, but CSS1 allows all elements to "float," not just the [image] images and [image] tables that HTML 3.2 allows.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Height

Syntax: | height: <value>
Possible Values: | <length> | auto
Initial Value: | auto
Applies to: | Block-level and replaced elements
Inherited: | No

Each [image] block-level or replaced element can be given a height, specified as a length or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the height property is auto, which results in the element's intrinsic height (i.e., the height of the element itself, for example the height of an image). Negative lengths are not allowed.

As with the width property, height can be used to scale an image:

IMG.foo { width: 40px; height: 40px }

In most cases, authors are advised to scale the image in an image editing program, since browsers will not likely scale images with high quality, and since scaling down causes the user to download an unnecessarily large file. However, scaling through the width and height properties is a useful option for user-defined style sheets in order to overcome vision problems.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Margin

Syntax: | margin: <value>
Possible Values: | [ <length> | <percentage> | auto ]{1,4}
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The margin property sets the margins of an element by specifying between one and four values, where each value is a length, a percentage, or auto. Percentage values refer to the parent element's width. Negative margins are permitted.

If four values are given, they apply to top, right, bottom, and left margin, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

Examples of margin declarations include:

BODY { margin: 5em }             /* all margins 5em */
P    { margin: 2em 4em }         /* top and bottom margins 2em,
                                    left and right margins 4em */
DIV  { margin: 1em 2em 3em 4em } /* top margin 1em,
                                    right margin 2em,
                                    bottom margin 3em,
                                    left margin 4em */

Note that adjoining vertical margins are collapsed to use the maximum of the margin values. Horizontal margins are not collapsed.

Using the margin property allows one to set all margins; alternatively, the properties margin-top, margin-bottom, margin-left, and margin-right may be used.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Bottom Margin

Syntax: | margin-bottom: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-bottom property sets the bottom margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

DT { margin-bottom: 3em }

Note that adjoining vertical margins are collapsed to use the maximum of the margin values.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Left Margin

Syntax: | margin-left: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-left property sets the left margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

ADDRESS { margin-left: 50% }

Note that adjoining horizontal margins are not collapsed.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Right Margin

Syntax: | margin-right: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-right property sets the right margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

Example:

P.narrow { margin-right: 50% }

Note that adjoining horizontal margins are not collapsed.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Top Margin

Syntax: | margin-top: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The margin-top property sets the top margin of an element by specifying a length or a percentage. Percentage values refer to the parent element's width. Negative margins are permitted.

For example, the following rule would eliminate the top margin of a document:

BODY { margin-top: 0 }

Note that adjoining vertical margins are collapsed to use the maximum of the margin values.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Padding

Syntax: | padding: <value>
Possible Values: | [ <length> | <percentage> ]{1,4}
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding property is a shorthand for the padding-top, padding-right, padding-bottom, and padding-left properties.

An element's padding is the amount of space between the border and the content of the element. Between one and four values are given, where each value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

If four values are given, they apply to top, right, bottom, and left padding, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

For example, the following rule sets the top padding to 2em, the right padding to 4em, the bottom padding to 5em, and the left padding to 4em:

BLOCKQUOTE { padding: 2em 4em 5em }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Bottom Padding

Syntax: | padding-bottom: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-bottom property describes how much space to put between the bottom border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Left Padding

Syntax: | padding-left: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-left property describes how much space to put between the left border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Right Padding

Syntax: | padding-right: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-right property describes how much space to put between the right border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Top Padding

Syntax: | padding-top: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | All elements
Inherited: | No

The padding-top property describes how much space to put between the top border and the content of the selector. The value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Width

Syntax: | width: <value>
Possible Values: | <length> | <percentage> | auto
Initial Value: | auto
Applies to: | Block-level and replaced elements
Inherited: | No

Each [image] block-level or replaced element can be given a width, specified as a length, a percentage, or as auto. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.) The initial value for the width property is auto, which results in the element's intrinsic width (i.e., the width of the element itself, for example the width of an image). Percentages refer to the parent element's width. Negative values are not allowed.

This property could be used to give common widths to some INPUT elements, such as submit and reset buttons:

INPUT.button { width: 10em }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Display

Syntax: | display: <value>
Possible Values: | block | inline | list-item | none
Initial Value: | block
Applies to: | All elements
Inherited: | No

The display property is used to define an element with one of four values:

  • block (a line break before and after the element)
  • inline (no line break before and after the element)
  • list-item (same as block except a list-item marker is added)
  • none (no display)

Each element typically is given a default display value by the browser, based on suggested rendering in the HTML specification.

The display property can be dangerous because of its ability to display elements in what would otherwise be an improper format. The use of the value none will turn off display of the element to which it is assigned, including any children elements!

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


List Style

Syntax: | list-style: <value>
Possible Values: | <list-style-type> || <list-style-position> || <url>
Initial Value: | Not defined
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style property is a shorthand for the list-style-type, list-style-position, and list-style-image properties.

Examples:

LI.square { list-style: square inside }
UL.plain  { list-style: none }
UL.check  { list-style: url(/LI-markers/checkmark.gif) circle }
OL        { list-style: upper-alpha }
OL OL     { list-style: lower-roman inside }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


List Style Image

Syntax: | list-style-image: <value>
Possible Values: | <url> | none
Initial Value: | none
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-image property specifies the image that will be used as list-item marker when image loading is turned on, replacing the marker specified in the list-style-type property.

Examples:

UL.check { list-style-image: url(/LI-markers/checkmark.gif) }
UL LI.x  { list-style-image: url(x.png) }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


List Style Position

Syntax: | list-style-position: <value>
Possible Values: | inside | outside
Initial Value: | outside
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-position property takes the value inside or outside, with outside being the default. This property determines where the marker is placed in regard to the list item. If the value inside is used, the lines will wrap under the marker instead of being indented. An example rendering is:

Outside rendering:
 * List item 1
   second line of list item

Inside rendering:
   * List item 1
   second line of list item

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


List Style Type

Syntax: | list-style-type: <value>
Possible Values: | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Initial Value: | disc
Applies to: | Elements with display value list-item
Inherited: | Yes

The list-style-type property specifies the type of list-item marker, and is used if list-style-image is none or if image loading is turned off.

Examples:

LI.square { list-style-type: square }
UL.plain  { list-style-type: none }
OL        { list-style-type: upper-alpha }  /* A B C D E etc. */
OL OL     { list-style-type: decimal }      /* 1 2 3 4 5 etc. */
OL OL OL  { list-style-type: lower-roman }  /* i ii iii iv v etc. */

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Whitespace

Syntax: | white-space: <value>
Possible Values: | normal | pre | nowrap
Initial Value: | normal
Applies to: | Block-level elements
Inherited: | Yes

The white-space property will determine how spaces within the element are treated. This property takes one of three values:

  • normal (collapses multiple spaces into one)
  • pre (does not collapse multiple spaces)
  • nowrap (does not allow line wrapping without a [image] <BR> tag)

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Background

Syntax: | background: <value>
Possible Values: | <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | No

The background property is a shorthand for the more specific background-related properties. Some examples of background declarations follow:

BODY       { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P          { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE      { background: #0c0 url(leaves.jpg) no-repeat bottom right }

A value not specified will receive its initial value. For example, in the first three rules above, the background-position property will be set to 0% 0%.

To help avoid conflicts with user style sheets, background and color properties should always be specified together.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Background Attachment

Syntax: | background-attachment: <value>
Possible Values: | scroll | fixed
Initial Value: | scroll
Applies to: | All elements
Inherited: | No

The background-attachment property determines if a specified background image will scroll with the content or be fixed with regard to the canvas. For example, the following specifies a fixed background image:

BODY { background: white url(candybar.gif);
       background-attachment: fixed }

Authors may also use the shorthand background property, which is currently better supported than the background-attachment property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Background Color

Syntax: | background-color: <value>
Possible Values: | <color> | transparent
Initial Value: | transparent
Applies to: | All elements
Inherited: | No

The background-color property sets the background color of an element. For example:

BODY { background-color: white }
H1   { background-color: #000080 }

To help avoid conflicts with user style sheets, background-image should be specified whenever background-color is used. In most cases, background-image: none is suitable.

Authors may also use the shorthand background property, which is currently better supported than the background-color property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Background Image

Syntax: | background-image: <value>
Possible Values: | <url> | none
Initial Value: | none
Applies to: | All elements
Inherited: | No

The background-image property sets the background image of an element. For example:

BODY { background-image: url(/images/foo.gif) }
P    { background-image: url(http://www.htmlhelp.com/bg.png) }

When a background image is defined, a similar background color should also be defined for those not loading images.

Authors may also use the shorthand background property, which is currently better supported than the background-image property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Background Position

Syntax: | background-position: <value>
Possible Values: | [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Initial Value: | 0% 0%
Applies to: | Block-level and replaced elements
Inherited: | No

The background-position property gives the initial position of a specified background image. This property may only be applied to [image] block-level elements and replaced elements. (A replaced element is one for which only the intrinsic dimensions are known; HTML replaced elements include IMG, INPUT, TEXTAREA, SELECT, and OBJECT.)

The easiest way to assign a background position is with keywords:

  • Horizontal keywords (left, center, right)
  • Vertical keywords (top, center, bottom)

Percentages and lengths may also be used to assign the position of the background image. Percentages are relative to the size of the element. Although lengths are allowed, they are not recommended due to their inherent weakness in dealing with differing display resolutions.

When using percentages or lengths, the horizontal position is specified first, followed by the vertical position. A value such as 20% 65% specifies that the point 20% across and 65% down the image be placed at the point 20% across and 65% down the element. A value such as 5px 10px specifies that the upper left corner of the image be placed 5 pixels to the right of and 10 pixels below the upper left corner of the element.

If only the horizontal value is given, the vertical position will be 50%. Combinations of lengths and percentages are allowed, as are negative positions. For example, 10% -2cm is permitted. However, percentages and lengths cannot be combined with keywords.

The keywords are interpreted as follows:

  • top left = left top = 0% 0%
  • top = top center = center top = 50% 0%
  • right top = top right = 100% 0%
  • left = left center = center left = 0% 50%
  • center = center center = 50% 50%
  • right = right center = center right = 100% 50%
  • bottom left = left bottom = 0% 100%
  • bottom = bottom center = center bottom = 50% 100%
  • bottom right = right bottom = 100% 100%

If the background image is fixed with regard to the canvas, the image is placed relative to the canvas instead of the element.

Authors may also use the shorthand background property, which is currently better supported than the background-position property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Background Repeat

Syntax: | background-repeat: <value>
Possible Values: | repeat | repeat-x | repeat-y | no-repeat
Initial Value: | repeat
Applies to: | All elements
Inherited: | No

The background-repeat property determines how a specified background image is repeated. The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. For example:

BODY { background: white url(candybar.gif);
       background-repeat: repeat-x }

In the above example, the image will only be tiled horizontally.

Authors may also use the shorthand background property, which is currently better supported than the background-repeat property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Color

Syntax: | color: <color>
Initial Value: | Determined by browser
Applies to: | All elements
Inherited: | Yes

The color property allows authors to specify the color of an element. See the Units section for color value descriptions. Some example color rules include:

H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }

To help avoid conflicts with user style sheets, background and color properties should always be specified together.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Font

Syntax: | font: <value>
Possible Values: | [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Initial Value: | Not defined
Applies to: | All elements
Inherited: | Yes

The font property may be used as a shorthand for the various font properties, as well as the line height. For example,

P { font: italic bold 12pt/14pt Times, serif }

specifies paragraphs with a bold and italic Times or serif font with a size of 12 points and a line height of 14 points.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Font Family

Syntax: font-family: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Possible Values: <family-name>
  • Any font family name may be used
<generic-family>
  • serif (e.g., Times)
  • sans-serif (e.g., Arial or Helvetica)
  • cursive (e.g., Zapf-Chancery)
  • fantasy (e.g., Western)
  • monospace (e.g., Courier)
Initial Value: Determined by browser
Applies to: All elements
Inherited: Yes

Font families may be assigned by a specific font name or a generic font family. Obviously, defining a specific font will not be as likely to match as a generic font family. Multiple family assignments can be made, and if a specific font assignment is made it should be followed by a generic family name in case the first choice is not present.

A sample font-family declaration might look like this:

P { font-family: "New Century Schoolbook", Times, serif }

Notice that the first two assignments are specific type faces: New Century Schoolbook and Times. However, since both of them are serif fonts, the generic font family is listed as a backup in case the system does not have either of these but has another serif font which meets the qualifications.

Any font name containing whitespace must be quoted, with either single or double quotes.

The font family may also be given with the font property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Font Size

Syntax: font-size: <absolute-size> | <relative-size> | <length> | <percentage>
Possible Values:
  • <absolute-size>
    • xx-small | x-small | small | medium | large | x-large | xx-large
  • <relative-size>
    • larger | smaller
  • <length>
  • <percentage> (in relation to parent element)

Initial Value: medium
Applies to: All elements
Inherited: Yes

The font-size property is used to modify the size of the displayed font. Absolute lengths (using units like pt and in) should be used sparingly due to their weakness in adapting to different browsing environments. Fonts with absolute lengths can very easily be too small or too large for a user.

Some example size assignments would be:

H1     { font-size: large }
P      { font-size: 12pt }
LI     { font-size: 90% }
STRONG { font-size: larger }

Authors should be aware that [image] Microsoft Internet Explorer 3.x incorrectly treats em and ex units as pixels, which can easily make text using these units unreadable. The browser also incorrectly applies percentage values relative to its default font size for the selector, rather than relative to the parent element's font size. This makes rules like

H1 { font-size: 200% }

dangerous in that the size will be twice IE's default font size for level-one headings, rather than twice the parent element's font size. In this case, BODY would most likely be the parent element, and it would likely define a medium font size, whereas the default level-one heading font size imposed by IE would probably be considered xx-large.

Given these bugs, authors should take care in using percentage values for font-size, and should probably avoid em and ex units for this property.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Font Style

Syntax: | font-style: <value>
Possible Values: | normal | italic | oblique
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-style property defines that the font be displayed in one of three ways: normal, italic or oblique (slanted). A sample style sheet with font-style declarations might look like this:

H1 { font-style: oblique }
P  { font-style: normal }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Font Variant

Syntax: | font-variant: <value>
Possible Values: | normal | small-caps
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-variant property determines if the font is to display in normal or small-caps. Small-caps are displayed when all the letters of the word are in capitals with uppercase characters slightly larger than lowercase. Later versions of CSS may support additional variants such as condensed, expanded, small-caps numerals or other custom variants. An example of a font-variant assignment would be:

SPAN { font-variant: small-caps }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Font Weight

Syntax: | font-weight: <value>
Possible Values: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The font-weight property is used to specify the weight of the font. The bolder and lighter values are relative to the inherited font weight, while the other values are absolute font weights.

Note: Since not all fonts have nine possible display weights some of the weights may be grouped together in assignment. If the specified weight is not available, an alternate will be chosen on the following basis:

  • 500 may be switched with 400, and vice versa
  • 100-300 may be assigned to the next lighter weight, if any, or the next darker weight otherwise
  • 600-900 may be assigned to the next darker weight, if any, or the next lighter weight otherwise

Some example font-weight assignments would be:

H1 { font-weight: 800 }
P  { font-weight: normal }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Letter Spacing

Syntax: | letter-spacing: <value>
Possible Values: | normal | <length>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The letter-spacing property defines an additional amount of space between characters. The value must be in the length format; negative values are permitted. A setting of 0 will prevent justification.

Examples:

H1     { letter-spacing: 0.1em }
P.note { letter-spacing: -0.1em }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Line Height

Syntax: | line-height: <value>
Possible Values: | normal | <number> | <length> | <percentage>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The line-height property will accept a value to control the spacing between baselines of text. When the value is a number, the line height is calculated by multiplying the element's font size by the number. Percentage values are relative to the element's font size. Negative values are not permitted.

Line height may also be given in the font property along with a font size.

The line-height property could be used to double space text:

P { line-height: 200% }

Microsoft Internet Explorer 3.x incorrectly treats number values and values with em or ex units as pixel values. This bug can easily make pages unreadable, and so authors should avoid provoking it wherever possible; percentage units are often a good choice.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Text Alignment

Syntax: | text-align: <value>
Possible Values: | left | right | center | justify
Initial Value: | Determined by browser
Applies to: | Block-level elements
Inherited: | Yes

The text-align property can be applied to [image] block-level elements (P, H1, etc.) to give the alignment of the element's text. This property is similar in function to HTML's ALIGN attribute on paragraphs, headings, and divisions.

Some examples follow:

H1          { text-align: center }
P.newspaper { text-align: justify }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Text Decoration

Syntax: | text-decoration: <value>
Possible Values: | none | [ underline || overline || line-through || blink ]
Initial Value: | none
Applies to: | All elements
Inherited: | No

The text-decoration property allows text to be decorated through one of five properties: underline, overline, line-through, blink, or the default, none.

For example, one can suggest that links not be underlined with

A:link, A:visited, A:active { text-decoration: none }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Text Indentation

Syntax: | text-indent: <value>
Possible Values: | <length> | <percentage>
Initial Value: | 0
Applies to: | Block-level elements
Inherited: | Yes

The text-indent property can be applied to [image] block-level elements (P, H1, etc.) to define the amount of indentation that the first line of the element should receive. The value must be a length or a percentage; percentages refer to the parent element's width. A common use of text-indent would be to indent a paragraph:

P { text-indent: 5em }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Text Transformation

Syntax: | text-transform: <value>
Possible Values: | none | capitalize | uppercase | lowercase
Initial Value: | none
Applies to: | All elements
Inherited: | Yes

The text-transform property allows text to be transformed by one of four properties:

  • capitalize (capitalizes first character of each word)
  • uppercase (capitalizes all characters of each word)
  • lowercase (uses small letters for all characters of each word)
  • none (the initial value)

Examples:

H1 { text-transform: uppercase }
H2 { text-transform: capitalize }

The text-transform property should only be used to express a stylistic desire. It would be inappropriate, for example, to use text-transform to capitalize a list of countries or names.

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Vertical Alignment

Syntax: | vertical-align: <value>
Possible Values: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Initial Value: | baseline
Applies to: | Inline elements
Inherited: | No

The vertical-align property may be used to alter the vertical positioning of an inline element, relative to its parent element or to the element's line. (An inline element is one which has no line break before and after it, for example, EM, A, and IMG in HTML.)

The value may be a percentage relative to the element's line-height property, which would raise the element's baseline the specified amount above the parent's baseline. Negative values are permitted.

The value may also be a keyword. The following keywords affect the positioning relative to the parent element:

  • baseline (align baselines of element and parent)
  • middle (align vertical midpoint of element with baseline plus half the x-height--the height of the letter "x"--of the parent)
  • sub (subscript)
  • super (superscript)
  • text-top (align tops of element and parent's font)
  • text-bottom (align bottoms of element and parent's font)

The keywords affecting the positioning relative to the element's line are

  • top (align top of element with tallest element on the line)
  • bottom (align bottom of element with lowest element on the line)

The vertical-align property is particularly useful for aligning images. Some examples follow:

IMG.middle { vertical-align: middle }
IMG        { vertical-align: 50% }
.exponent  { vertical-align: super }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.


Word Spacing

Syntax: | word-spacing: <value>
Possible Values: | normal | <length>
Initial Value: | normal
Applies to: | All elements
Inherited: | Yes

The word-spacing property defines an additional amount of space between words. The value must be in the length format; negative values are permitted.

Examples:

P EM   { word-spacing: 0.4em }
P.note { word-spacing: -0.2em }

Web Design Group ~

Copyright © 1997 John Pozadzides and Liam Quinn. All rights reserved.